<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>校园破冰交友与失物招领平台</title>
    <link rel="stylesheet" type="text/css" href="../assets/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="../assets/fonts/line-icons.css">
    <link rel="stylesheet" type="text/css" href="../assets/css/main.css">
    <link rel="stylesheet" type="text/css" href="../assets/css/responsive.css">
    <link rel="stylesheet" type="text/css" href="../assets/css/icons.css"/>
    <link rel="stylesheet" type="text/css" href="../assets/css/index.css"/>
</head>
<body style="overflow: auto;">
<div class="app header-default side-nav-dark">
    <div class="layout">
        <div class="header navbar">
            <div class="header-container">
                <div class="nav-logo">
                    <a href="index.html">
                        <b><img src="../assets/img/logo.png" alt=""></b>
                        <span class="logo" style="color: #E22A6F;font-size: 18px;">校园破冰交友平台</span>
                    </a>
                </div>
                <ul class="nav-left">
                    <li>
                        <a class="sidenav-fold-toggler" href="javascript:void(0);">
                            <i class="lni-menu"></i>
                        </a>
                        <a class="sidenav-expand-toggler" href="javascript:void(0);">
                            <i class="lni-menu"></i>
                        </a>
                    </li>
                </ul>
                <ul class="nav-right">
                    <li class="search-box">
                        <input class="form-control" type="text" placeholder="请输入好友账号" id="search">
                        <i class="lni-search"></i>
                    </li>
                    <li class="massages dropdown dropdown-animated scale-left">
                        <span class="counter" id="messageCount">0</span>
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            <i class="lni-bubble"></i>
                        </a>
                        <ul class="dropdown-menu dropdown-lg" id="messageList">
                            <li>
                                <div class="dropdown-item align-self-center">
                                    <h5>消息</h5>
                                </div>
                            </li>
                            <li>
                                <ul class="list-media">
                                    <li class="list-item">
                                        <a href="#" class="media-hover" id="showMessage">

                                        </a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li class="notifications dropdown dropdown-animated scale-left">
                        <span class="counter" id="noticeCount">0</span>
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            <i class="lni-alarm"></i>
                        </a>
                        <ul class="dropdown-menu dropdown-lg" id="noticeList">
                            <li>
                                <h5 class="n-title text-center">
                                    <i class="lni-alarm"></i>
                                    <span>通知</span>
                                </h5>
                            </li>
                            <li>
                                <ul class="list-media">
                                    <li class="list-item">
                                        <a href="#" class="media-hover" id="showNotice">

                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li class="check-all text-center">
                                <span>
                                    <a href="#" class="text-gray">查看全部通知</a>
                                </span>
                            </li>
                        </ul>
                    </li>
                    <li class="user-profile dropdown dropdown-animated scale-left">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            <img id="headUserPhoto1" style="min-height: 40px" class="profile-img img-fluid"
                                 src="../assets/img/avatar/avatar.jpg" alt="">
                        </a>
                        <ul class="dropdown-menu dropdown-md">
                            <li>
                                <ul class="list-media">
                                    <li class="list-item avatar-info">
                                        <div class="media-img">
                                            <img id="headUserPhoto2" src="../assets/img/avatar/avatar.jpg" alt="">
                                        </div>
                                        <div class="info">
                                            <span id="headUsername" class="title text-semibold">Tomas Murray</span>
                                        </div>
                                    </li>
                                </ul>
                            </li>
                            <li role="separator" class="divider"></li>
                            <li>
                                <a href="../profile/profile-edit.html" target="frameContent">
                                    <i class="lni-cog"></i>
                                    <span>修改个人信息</span>
                                </a>
                            </li>
                            <li>
                                <a href="../profile/update-password.html" target="frameContent">
                                    <i class="lni-cog"></i>
                                    <span>修改密码</span>
                                </a>
                            </li>
                            <li>
                                <a href="../profile/profile.html" target="frameContent">
                                    <i class="lni-user"></i>
                                    <span>个人信息</span>
                                </a>
                            </li>
                            <li>
                                <a href="../login/login.html">
                                    <i class="lni-lock"></i>
                                    <span>登出</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
        <div class="side-nav expand-lg">
            <div class="side-nav-inner">
                <ul class="side-nav-menu">
                    <li class="side-nav-header"><span>导航</span></li>
                    <li class="nav-item dropdown">
                        <a href="../chat/chat-app.html" class="dropdown-toggle" target="frameContent">
                            <span class="icon-holder"><i class="fa fa-paper-plane"></i></span>
                            <span class="title">消息</span>
                        </a>
                    </li>
                    <li class="nav-item dropdown">
                        <a href="../friend/friend-list.html" class="dropdown-toggle" target="frameContent">
                            <span class="icon-holder"><i class="fa fa-address-book-o"></i></span>
                            <span class="title">联系人</span>
                        </a>
                    </li>
                    <li class="nav-item dropdown">
                        <a href="#" class="dropdown-toggle">
                            <span class="icon-holder"><i class="fa fa-users"></i></span>
                            <span class="title">分组管理</span>
                            <span class="arrow">
								<i class="lni-chevron-right"></i>
							</span>
                        </a>
                        <ul class="dropdown-menu sub-down">
                            <li><a href="../friend/group-user.html" class="dropdown-toggle"
                                   target="frameContent">我的分组</a></li>
                            <li><a href="../friend/friend-manager.html" class="dropdown-toggle" target="frameContent">我的好友</a>
                            </li>
                        </ul>
                    </li>
                    <li class="nav-item dropdown">
                        <a href="../friend/friend-find.html" class="dropdown-toggle" target="frameContent">
                            <span class="icon-holder"><i class="fa fa-search"></i></span>
                            <span class="title">找好友</span>
                        </a>
                    </li>
                    <li class="nav-item dropdown">
                        <a href="#" class="dropdown-toggle">
                            <span class="icon-holder"><i class="fa fa-handshake-o"></i></span>
                            <span class="title">失物招领</span>
                            <span class="arrow">
        						<i class="lni-chevron-right"></i>
        					</span>
                        </a>
                        <ul class="dropdown-menu sub-down">
                            <li><a href="../lost-info/lost-info-all.html" class="dropdown-toggle" target="frameContent">查看失物招领</a>
                            </li>
                            <li><a href="../lost-info/lost-info-release.html" class="dropdown-toggle"
                                   target="frameContent">发布失物招领</a></li>
                            <li><a href="../lost-info/lost-info-user.html" class="dropdown-toggle"
                                   target="frameContent">我的失物招领</a></li>
                        </ul>
                    </li>
                    <li class="nav-item dropdown" id="audit">
                        <a href="#" class="dropdown-toggle">
                            <span class="icon-holder"><i class="fa fa-lock"></i></span>
                            <span class="title">审核管理</span>
                            <span class="arrow">
								<i class="lni-chevron-right"></i>
							</span>
                        </a>
                        <ul class="dropdown-menu sub-down">
                            <li><a href="../audit/audit-user.html" class="dropdown-toggle"
                                   target="frameContent">用户审核</a></li>
                            <li><a href="../audit/audit-lost.html" class="dropdown-toggle"
                                   target="frameContent">失物招领审核</a></li>
                        </ul>
                    </li>
                    <li class="nav-item dropdown" id="userManager">
                        <a href="../user/user-manager.html" class="dropdown-toggle" target="frameContent">
                            <span class="icon-holder"><i class="fa fa-user-o"></i></span>
                            <span class="title">用户管理</span>
                        </a>
                    </li>
                    <li class="nav-item dropdown" id="notice">
                        <a href="#" class="dropdown-toggle">
                            <span class="icon-holder"><i class="fa fa-bullhorn"></i></span>
                            <span class="title">通知管理</span>
                            <span class="arrow">
								<i class="lni-chevron-right"></i>
							</span>
                        </a>
                        <ul class="dropdown-menu sub-down">
                            <li><a href="../notice/notice-manager.html" class="dropdown-toggle" target="frameContent">发布通知</a></li>
                            <li><a href="../notice/notice-user.html" class="dropdown-toggle" target="frameContent">展示通知</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>

        <div class="page-container">
            <div class="main-content">
                <iframe src="../friend/friend-list.html" name="frameContent" id="frameContent" width="100%" height="100%"
                        frameborder="0" scrolling="no"></iframe>
            </div>
            <footer class="content-footer">
                <div class="footer">
                    <div class="copyright">
                        <span>Copyright © 2019 <b class="text-dark">黄胜瑾</b></span>
                    </div>
                </div>
            </footer>
        </div>
    </div>
</div>
<script src="../assets/js/jquery-min.js"></script>
<script src="../assets/js/bootstrap.min.js"></script>
<script src="../assets/js/popper.min.js"></script>
<script src="../assets/js/main.js"></script>
<script src="../assets/js/jquery.app.js"></script>
<script>
    //项目根路径
    var user = JSON.parse(sessionStorage.getItem("user"));

    var chatUserList = new Array();
    var nowChat = null;
    var friend = null;

    $(function () {
        if (user == null) {
            window.location.href = "../login/login.html";
        }

        $("#frameContent").height($(".main-content").height());

        $("#showMessage div").click(function () {
            nowChat = parseInt($(this).find('p').text());
            $("#frameContent").attr("src", "../chat/chat-app.html");
        });

        $("#search").keypress(function (event) {
            if(event.which === 13){
                $("#frameContent").attr("src", "../friend/friend-list.html");
                $.ajax({
                    type: "post",
                    url: ctx+"/user/findByUsername",
                    data: {username:$("#search").val()},
                    xhrFields: {
                        withCredentials: true
                    },
                    success: function (data) {
                        setTimeout(function () {
                            $("#frameContent")[0].contentWindow.showUser(data);
                        },1000);
                    }
                });
            }
        });

        // 获取未读通知
        $.ajax({
            type: "post",
            url: ctx+"/userNotice/getByUserId",
            data: {id:user.id},
            success: function (data) {
                var count = 0;
                for(var i=0;i<data.length;i++){
                    var notice = data[i].notice;
                    if(data[i].isRead===0){
                        var str = "<div style='margin-bottom: 10px;'><div class='media-img'><div class='icon-avatar bg-primary'>管</div></div>"+
                            "<div class='info'><span class='title'>";
                        if(notice.message.length>10){
                            str += notice.message.substr(0,8)+"...";
                        }else{
                            str += notice.message;
                        }
                        str += "</span><span class='sub-title'>"+notice.sendTime+"</span></div></div></div>";
                        $("#showNotice").append(str);
                        count += 1;
                    }
                }
                $("#noticeCount").html(count);
            }
        });

        $("#noticeList a").click(function () {
            $("#frameContent").attr("src", "../notice/notice-user.html")
        });

        if (user.role === 0) {
            $("#userManager").hide();
            $("#audit").hide();
            $("#notice").hide();
        }else if(user.role === 1){
            $("#userManager").show();
            $("#audit").show();
            $("#notice").hide();
        }else{
            $("#userManager").show();
            $("#audit").show();
            $("#notice").show();
        }

        $("#headUserPhoto1").attr("src", user.profilePhoto);
        $("#headUserPhoto2").attr("src", user.profilePhoto);
        $("#headUsername").text(user.nickname);
    });
    // 获取未读消息
    function getMessage(){
        $.ajax({
            type: "post",
            url: ctx+"/userFriend/findChatHistory",
            xhrFields: {
                withCredentials: true
            },
            success: function (data) {
                $("#showMessage").empty();
                var count = 0;
                for(var i=0;i<data.length;i++){
                    var chatHistoryList = data[i].chatHistoryList;
                    for(var j=0;j<chatHistoryList.length;j++){
                        var str = "<div style='margin-bottom: 10px;'><div class='media-img'><img src='"+data[i].sourceUser.profilePhoto+
                            "' alt=''></div><div class='info'><span class='title'>"+data[i].sourceUser.nickname+"</span><span class='sub-title'>"+
                            "<p>"+data[i].sourceUser.id+"</p>";
                        if(chatHistoryList[j].message.length>10){
                            str += chatHistoryList[j].message.substr(0,8)+"...</span></div></div>";
                        }else{
                            str += chatHistoryList[j].message+"</span></div></div>";
                        }
                        $("#showMessage").append(str);
                    }
                    count += chatHistoryList.length;
                }
                $("#messageCount").text(count);
            }
        });
    }

</script>
<script src="../assets/js/chatApp.js"></script>
<script src="../assets/js/jquery.bootstrap-growl.js"></script>
</body>
</html>